<template>
  <div class="my-order">
    <van-nav-bar title="我的订单" left-arrow @click-left="$router.back()" />
    <!-- 导航栏内容 -->
    <van-tabs v-model="params.dataType">
      <van-tab title="全部" name="all"></van-tab>
      <van-tab title="待支付" name="payment"></van-tab>
      <van-tab title="待发货" name="delivery"></van-tab>
      <van-tab title="待收货" name="received"></van-tab>
      <van-tab title="待评价" name="comment"></van-tab>
    </van-tabs>

    <!-- 订单内容 -->
    <van-list finished-text="没有更多了" v-if="orderList.data && orderList.data.length > 0">
      <van-cell-group inset class="order-group" v-for="order in orderList.data" :key="order.order_id">
        <van-cell :value="order.state_text" :title="order.create_time" class="common-cell" value-class="red"></van-cell>
        <!-- 订单列表 -->
        <OrderItem v-for="item in order.goods" :key="item.order_id" :item="item"></OrderItem>

        <div v-if="order.orderTotalNum" class="total_num">
          <span>共 {{ order.orderTotalNum }} 件商品，总金额：</span>
          <span v-if="order.order_price">￥ {{ order.order_price}}</span>
        </div>

        <van-cell>
          <van-button type="default" size="small" class="cancel-btn" @click="cancelOrder(order.order_id)">申请取消</van-button>
        </van-cell>
      </van-cell-group>
    </van-list>
    <van-empty v-else class="custom-image" image="http://cba.itlike.com/public/mweb/static/empty.png" description="亲，暂无订单记录" />
  </div>
</template>

<script>
import OrderItem from '@/components/OrderItem'
import { cancelOrder, orderList } from '@/apis/order'
import { Dialog, Toast } from 'vant'
export default {
  components: { OrderItem },
  name: 'MyOrder',
  data () {
    return {
      titles: ['全部', '待支付', '待发货', '待收货', '待评价'],
      params: {
        dataType: this.$route.query.dataType || 'all',
        page: 1
      },
      orderList: [],
      active: this.$route.params.active || 1
    }
  },
  created () {
    this.getOrder()
  },
  computed: {
    totalNum () {
      this.orderList.data.forEach((item, index) => {
        item.goods.forEach((product, index) => {
          item.orderTotalNum += +product.total_num
        })
      })
      return this.orderList.data.map(item => item.orderTotalNum)
    }
  },
  // 可以用侦听器，也可以用vant-tabs里面的@click事件绑定方法
  watch: {
    params: {
      immediate: true,
      deep: true,
      handler () {
        this.getOrder(this.params)
      }
    }
  },
  methods: {
    async getOrder () {
      const { data: { list } } = await orderList(this.params)
      list.data.forEach((item) => {
        item.orderTotalNum = 0
      })
      this.orderList = list
    },
    cancelOrder (orderId) {
      Dialog.confirm({
        title: '确定取消该订单吗?'
      })
        .then(async () => {
          try {
            await cancelOrder(orderId)
            Toast('取消订单成功')
            this.getOrder(this.params)
          } catch (error) {
            Toast('取消订单失败')
          }
        })
        .catch(() => {
          // 取消订单
        })
    }
  }
}
</script>

<style lang="less" scoped>
// 订单列表
.order-group {
    border-bottom: 1px solid rgb(243, 240, 240);

    // 订单总计
  .total_num {
    text-align: right;
    font-size: 14px;
    padding: 4.26667vw;
  }
  // 取消按钮
  .cancel-btn {
    float: right;
  }
  .van-cell::after {
    border: 0 !important;
  }
  // 空图片
  .custom-image {
    margin: 10px auto;
    width: 500px;
    height: 500px;
  }
}
</style>
